<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color: chocolate;
        }
        *{
            color: darkgrey;
        }
        .test{
            color: yellow !important;
        }
        #my{
            color: forestgreen;
        }
    </style>
</head>
<body>
<!--css 三大特性:
1. 层叠性
当多个样式作用于同一个标签时,样式发生了冲突
总是执行后面的样式 而与这些样式调用的顺序无关
可以认为后面的样式叠在了前面的样式上
2. 继承性
内部的标签可以继承外部标签的样式 只能继承文字相关的样式
例如文字颜色,文字大小,粗细
特殊的: h标签无法继承文字大小
a标签 无法继承文字颜色
3. 优先级
当多个选择器 作用在同一个标签上时 然后又设置了相同的属性
如何层叠 就是由优先级来确定的
1. 如果是间接选中(继承来的)那么谁离得近就使用谁的
2. 如果是直接选中 并且选择器类型一样 那么谁写在后面就听谁的
3. 如果是直接选中 并且类型还不一样 那么就会按照选择器的优先级来确定
  选择器的优先级:
 important>行内样式>ID选择器>类选择器>标签选择器>通配符选择器>继承选择器
 如果我们想提某个样式 它的优先级 可以使用!impotent
 1. 它只能修饰属性
 2. 需要写在;前面
 3. 通配符选择器 也可以使用
-->
<p>白日依山尽,<i>黄河入海流</i><a href="#">哈哈哈哈</a></p>
<hr>
<p>横眉冷对千夫指,<span class="test" id="my" style="color: slateblue">俯首甘为孺子牛</span></p>
</body>
</html>